<template>
  <div class="container">
    <div class="header">
<!--      <h2>波形数据可视化</h2>-->
      <p>设备: {{ devName }} | 通道: {{ channelName }} | 日期: {{ date }}</p>
    </div>
    <div id="waveChart" ref="chartRef" class="chart-container"></div>
    <el-card class="info" shadow="never">
      <p>
        数据点数量: {{ dataCount }} | 最大值: {{ maxValue }} | 最小值:
        {{ minValue }}
      </p>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "WaveformVisualization",
  props: {
    devName: {
      type: String,
      default: "未知设备",
    },
    channelName: {
      type: String,
      default: "未知通道",
    },
    date: {
      type: String,
      default: "2025-01-20",
    },
    waveData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chart: null,
      dataCount: 0,
      maxValue: 0,
      minValue: 0,
    };
  },
  mounted() {
    this.initChart();
    // 响应窗口大小变化
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    window.removeEventListener("resize", this.handleResize);
    // 销毁图表实例
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    initChart() {
      // 计算数据统计信息
      this.dataCount = this.waveData.length;
      this.maxValue = this.dataCount > 0 ? Math.max(...this.waveData) : 0;
      this.minValue = this.dataCount > 0 ? Math.min(...this.waveData) : 0;

      // 生成X轴数据点
      const xAxisData = Array.from(
        { length: this.waveData.length },
        (_, i) => i
      );

      // 初始化ECharts实例
      this.chart = echarts.init(this.$refs.chartRef);

      // 图表配置项
      const option = {
        title: {
          text: "波形数据折线图",
          left: "center",
          textStyle: {
            fontSize: 18,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            const dataIndex = params[0].dataIndex;
            return `索引: ${dataIndex}<br/>值: ${this.waveData[dataIndex]}`;
          },
          axisPointer: {
            type: "cross",
            lineStyle: {
              color: "#999",
              width: 1,
              type: "solid",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: { title: "保存为图片" },
            // dataZoom: { title: "区域缩放" },
            restore: { title: "还原" },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
          axisLabel: {
            interval: Math.floor(this.waveData.length / 10),
            formatter: "{value}",
          },
          name: "数据点索引",
          nameLocation: "middle",
          nameGap: 10,
        },
        yAxis: {
          type: "value",
          name: "波形值",
          nameLocation: "middle",
          nameGap: 40,
          min: this.dataCount > 0 ? Math.floor(this.minValue * 1.1) : -10,
          max: this.dataCount > 0 ? Math.ceil(this.maxValue * 1.1) : 10,
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#DDD",
            },
          },
        },
        series: [
          {
            name: "波形数据",
            type: "line",
            sampling: "average",
            data: this.waveData,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: "#409EFF",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(64, 158, 255, 0.5)" },
                { offset: 1, color: "rgba(64, 158, 255, 0.1)" },
              ]),
            },
            smooth: true,
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end:
              this.waveData.length > 100
                ? (100 / this.waveData.length) * 100
                : 100,
          },
          {
            start: 0,
            end:
              this.waveData.length > 100
                ? (100 / this.waveData.length) * 100
                : 100,
          },
        ],
        animation: true,
      };

      // 设置图表配置项并渲染
      this.chart.setOption(option);
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
  },
  watch: {
    waveData: {
      handler() {
        this.$nextTick(() => {
          this.initChart();
        });
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  color: #303133;
}

.chart-container {
  height: 500px;
  width: 100%;
}

.info {
  margin-top: 20px;
  background-color: #f0f9eb;
  color: #67c23a;
  font-size: 14px;
}
</style>
